<template>
  <div class="mediation-information">
    <div class="mediation-information-item" v-for="item in list" :key="item.id">
      <div class="title-item">
        <div class="title">{{item.title}}</div>
        <div class="btn" @click="open(item)">查看案例</div>
      </div>
      <div class="text">{{item.content}}</div>
    </div>
    <Dialog v-if="info.show" :info="info">
      <div class="text-block">
        <div class="text-item" v-if="id===1">
          <p>顺和家园独居老人李某来到警务室反映，自己积攒在纸箱中的2000余元现金被保洁员王某捡走，前去索要王某否认此事，双方发生矛盾，请求帮助。网格警长迅速联合社区网格长开展工作。经走访调查，调取监控并多次热心引导老人回忆，还原事实真相。并在地下室找到该纸箱和现金，后双方对民警和网格长的热心帮助表示感谢。</p>
          <img src="@/assets/images/case1.jpg" alt="案例1图片" class="case-image">
        </div>
        <div class="text-item" v-else-if="id===2">
          <p>富丽阳光小区居民马某外出务工结束回到家中，发展刚装修好的房子被家中下水管道溢出的水泡坏，于是马某情绪激动找物业、楼上居民理论并要求赔偿。网格警长了解情况后，及时联合网格长、驻社区律师和该小区义警队伍成员开始给物业、楼上10户居民分别耐心的开展调解工作，通过耐心沟通、多次走访入户和民法宣传，最终由物业牵头、10户居民配合对马某进行了损失赔偿，最终通过耐心的调解和走访工作将矛盾及时化解。</p>
          <img src="@/assets/images/case2.jpg" alt="案例2图片" class="case-image">
        </div>
        <div class="text-item" v-else-if="id===3">
          <p>近日，金泉路社区网格长巡查发现，弘胜景苑一住宅内，罗某租赁房屋私设无证养老机构，收住8名老人，其中2人生活不能自理，雇佣的护理人员也无资质证书与健康证，且罗某还向老人收取照护费。该住宅被改为经营性用房，未达养老机构备案条件，未备案登记、办相关证照，也未经其他业主和业委会同意，房屋无消防、监控设施，隐患大。社区与派出所、民政局等多部门联合调查，限罗某三天内转移安置老人并搬离，否则将依法处置。本次发现并取缔非法养老机构，充分发挥了网格长的“前哨”作用，有效维护了居民生命财产安全。</p>
          <img src="@/assets/images/case3.1.jpg" alt="案例3图片" class="case-image">
          <img src="@/assets/images/case3.2.jpg" alt="案例3图片" class="case-image">
          <img src="@/assets/images/case3.3.jpg" alt="案例3图片" class="case-image">
        </div>
        <div class="text-item" v-else-if="id===4">
          <p>辖区居民李某因装修房屋，找到了装修工人张某，双方口头约定房屋装修款，李某先期支付张某装修押金后，张某便开始装修。后李某因诈骗罪被判处有期徒刑，导致张某无法联系到李某，尾款无法收回，张某装修好李某的房屋后，便居住在李某的房屋内。李某刑满释放后回到家，发现张某在家中居住，遂要求张某搬离其房屋，张某要求李某支付房屋装修未支付的尾款，李某称其现无住所，生活困难，不愿支付且情绪激动，有极端思想。网格警长、社区综治办及驻社区司法干警、调解员通过研判，采用明法析理、换位思考、分头调解、现场清算和实地走访为突破口，历时2天，李某最终同意支付张某房屋装修款，张某也同意搬离李某的房屋，双方达成一致，握手言和。从而有效避免了纠纷升级和矛盾激化</p>
          <img src="@/assets/images/case4.jpg" alt="案例4图片" class="case-image">
        </div>
        <div class="text-item" v-else-if="id===5">
          <p>顺和家园小区的毛某因夫妻感情失和家庭矛盾不断升级，导致精神抑郁、无心打工挣钱，导致年幼儿子无人照管，家庭生活困难。了解到情况后民警及时对夫妻二人开展调解并及时联系医院将毛某送医治疗并对其儿子开展帮扶照顾，为毛某解决实际困难。同时主动联系辖区爱心人士对毛某儿子免费提供生活必需品，在这样无微不至、从未间断的照顾下，毛某康复出院后重拾生活信心，生活逐渐步入正轨。</p>
          <img src="@/assets/images/case5.jpg" alt="案例5图片" class="case-image">
        </div>
        <div class="text-item" v-else-if="id===6">
          <p>家住悦和家园的徐某、王某二人曾为男女朋友关系，二人在悦和家园王某申请的廉租房内同居，后二人因家庭琐事经常吵架后分手。因同居期间的花费问题，徐某要求王某退还自己用于该房屋装修及王某个人保险费等各项费用8万元。王某本人只承认2万元，其他费用自己不承担。徐某便以此为由长期在悦和家园该廉租房内居住，拒绝搬离。王某将徐某起诉到肃州区人民法院，肃州区人民法院判决徐某不得妨害王某位于悦和家园该房屋的占有及使用权。为尽快化解矛盾，警务室民警多次对徐某做思想工作，徐谋最终愿意配合调解。2024年12月，民警将二人通知到社区警务室进行调解。调解中，街道司法所干部、公职律师、政法干警针对双方当事人有人存在的矛盾根源及问题，现场核算共同花费的账目，通过"讲利害、摆事实、普法律"的方式，动之以情、晓之以理，通过耐心调解，双方签署调解协议书，徐某同意于限期搬离悦和家园廉租房，王某同意支付徐某23000元同居期间的花费。为防止矛盾反弹，警务室民警多次跟踪回访、督促落实协议履行，最终在民警及社区工作人员的见证下，徐某收到23000元费用后，搬离了悦和家园并将该廉租房钥匙归还给王某。同时签订保证书承诺不再骚扰王某，至此，该起矛盾纠纷得以成功化解。</p>
          <img src="@/assets/images/case6.jpg" alt="案例6图片" class="case-image">
        </div>
      </div>
    </Dialog>
  </div>
</template>

<script>
import Dialog from "@/components/dialog/Dialog";
import Text from "@/components/Adjust/Text";

export default {
  name: 'WorkMethods',
  components: {Text, Dialog},
  data(){
    return{
      list:[
        {id:1,title:'1、热心接待',content:'一张笑脸相迎、一杯热茶暖心、一句承诺负责'},
        {id:2,title:'2、耐心倾听',content:'"倾听-共情-化解"三步工作法，化解率97%'},
        {id:3,title:'3、细心调查',content:'以证据筑牢调解根基，还原事实真相'},
        {id:4,title:'4、公心调解',content:'不偏不倚，群众满意率99%'},
        {id:5,title:'5、诚心帮扶',content:'纾困劫难，传递治理温度感'},
        {id:6,title:'6、恒心回访',content:'长效跟踪，复发率<1%'},
      ],
      info:{
        title:'案例',
        width:'700px',  // 增加宽度以适应图片
        show:false,
      },
      id:null
    }
  },
  methods:{
    open(item){
      this.info.show=true
      this.id=item.id
    }
  }
}
</script>

<style scoped lang="scss">
.mediation-information{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  overflow: auto;
  &::-webkit-scrollbar {
    width: 4px;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: rgba(0,198,255,.3);
  }
  &::-webkit-scrollbar-track{
    border-radius: 3px;
    background: rgba(0,24,48,.3);
  }

  .mediation-information-item{
    width: calc(50% - 5px);
    background: #052639;
    padding: 15px;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);

    .title-item{
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #22dfe9;
      margin-bottom: 10px;

      .title{
        font-family: '冷酷体';
        color: #ff473b;
        font-size: 18px;
        font-weight: bold;
      }

      .btn{
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 12px;
        background: linear-gradient(90deg, #07384a, #0a4b63);
        width: 70px;
        height: 26px;
        border-radius: 5px;
        cursor: pointer;
        transition: all 0.3s;

        &:hover {
          background: linear-gradient(90deg, #0a4b63, #0d5e7a);
          transform: translateY(-2px);
        }
      }
    }

    .text{
      color: #e0f7fa;
      font-size: 15px;
      line-height: 1.6;
    }
  }
}
.text-block{
  overflow: scroll;
  height: 600px;
}
.text-item {
  color: white;
  font-size: 18px;
  line-height: 1.8;
  text-align: justify;

  p {
    margin-bottom: 20px;
    text-indent: 2em;
  }

  .case-image {
    width: 100%;
    max-height: 300px;
    object-fit: cover;
    border-radius: 5px;
    margin-top: 15px;
    border: 1px solid rgba(0, 198, 255, 0.3);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  }
}
</style>
